
import React, { PureComponent as Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Button, Select } from 'antd';
const {TextArea} = Input;
import {DatePicker} from 'antd';
import moment from 'moment';

const {Option} = Select;
import {connect} from "react-redux";

const FormItem = Form.Item;
function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}

@connect(
  state => {
    return {
      infBaseInfo:state.dubboInterface.infBaseInfo
    };
  }
)

class ChangeInterfaceForm extends Component {

  constructor(props){
    super(props);
    this.state = {};
  }

  static propTypes = {
    infBaseInfo:PropTypes.object,
    form: PropTypes.object,
    onSubmit: PropTypes.func,
    onCancel: PropTypes.func
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.onSubmit(values);
      }
    });
  };

  render() {
    const { getFieldDecorator, getFieldsError } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      }
    };

    const{cname,status,onlinedate,classname,desc} = this.props.infBaseInfo;

    return (
      <Form onSubmit={this.handleSubmit}>

        <FormItem {...formItemLayout} label="接口名称">
          {getFieldDecorator('cname', {
            rules: [
              {
                required: true,
                message: '请输入接口名称!'
              }
            ],
            initialValue: cname
          })(<Input placeholder="接口名称" />)}
        </FormItem>

        <FormItem {...formItemLayout} label="接口类名">
          {getFieldDecorator('classname', {
            rules: [
              {
                required: true,
                message: '请输入接口类名!'
              }
            ],
            initialValue: classname
          })(<Input placeholder="请输入全路径"  />)}
        </FormItem>

        <FormItem {...formItemLayout} label="接口状态">
          {getFieldDecorator('status', {
            initialValue: status,
            message: status==0?'设计中':status==1?'sit测试':status==2?'uat测试':status==3?'已上线':'未知'
          })(
            <Select>
              <Option value = {0}>设计中</Option>
              <Option value = {1}>sit测试</Option>
              <Option value = {2}>uat测试</Option>
              <Option value = {3}>已上线</Option>
            </Select>
          )}
        </FormItem>

        <FormItem {...formItemLayout} label="上线时间">
          {getFieldDecorator('onlinedate',{
            initialValue: onlinedate?moment(new Date(onlinedate), 'YYYY/MM/DD'):null
            // initialValue: onlinedate
          })(<DatePicker format='YYYY/MM/DD' />)}
        </FormItem>

        <FormItem {...formItemLayout} label="接口描述">
          {getFieldDecorator('desc', {
            initialValue: desc
          })(<TextArea rows={5} placeholder="在此可以编辑接口描述"  />)}
        </FormItem>

        <FormItem className="catModalfoot" wrapperCol={{ span: 24, offset: 8 }}>
          <Button onClick={this.props.onCancel} style={{ marginRight: '10px' }}>
            取消
          </Button>
          <Button type="primary" htmlType="submit" disabled={hasErrors(getFieldsError())}>
            提交
          </Button>
        </FormItem>

      </Form>
    );
  }
}

export default Form.create()(ChangeInterfaceForm);
